<template>
  <div class="app-container">

    <!-- 输入框 -->
    <el-input clearable  v-model="search.supplierName" style="width: 200px; padding-left: 5px; padding-top: 10px" size="medium"
      placeholder="请输入供应商名称" />

    <!-- 两个选择框 -->


    <!-- <el-select v-model="value" style="width: 200px; padding-left: 5px; padding-top: 10px" size="medium"
      placeholder="所属区域">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select> -->

    <el-select clearable v-model="search.state" style="width: 200px; padding-left: 5px; padding-top: 10px" size="medium"
      placeholder="请选择状态">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>

    <!-- 两个按钮 -->
    <el-button type="primary" style="margin-left: 15px" size="medium" v-hasBtn="'supplier_search'" @click="searchList()" icon="el-icon-search">查找</el-button>

    <el-button type="primary" size="medium" icon="el-icon-plus" v-hasBtn="'supplier_add'" @click="openCreate()">新增供货商</el-button>


    <el-dialog title="新增供货商" :model="detailDate"  :visible.sync="centerDialogVisible" width="50%">

     

      <el-form  :model="form" :rules="rules" label-position="right" label-width="200px" class="demo-form-inline" ref="form">
        <el-form-item label="供货商名称:" prop="supplierName">
          <el-input style="width: 350px;" v-model="form.supplierName" placeholder="供货商名称"></el-input>
        </el-form-item>
        <el-form-item label="联系人:" prop="contactName">
          <el-input style="width: 350px;" v-model="form.contactName" placeholder="联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="tel">
          <el-input style="width: 350px;" v-model="form.tel" placeholder="联系电话"></el-input>
        </el-form-item>
        <!-- <el-form-item label="所属区域:">
          <el-select v-model="form.region" placeholder="所属区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="详细地址:" prop="addr">
          <el-input style="width: 350px;" v-model="form.addr" placeholder="详细地址"></el-input>
        </el-form-item>
        <!-- <el-form-item label="邮箱地址:">
          <el-input v-model="form.mailbox" placeholder="邮箱地址"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="供应商账期:">
          <el-input v-model="form.Days" placeholder="供应商账期"></el-input>
        </el-form-item> -->
        <el-form-item label="供应商状态:" prop="state">
          <el-radio-group v-model="form.state" placeholder="供应商状态">
            <el-radio :label="1" >正常</el-radio>
            <el-radio :label="0" >禁用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="账期"  prop="paymentDays">
          <el-input-number style="width: 350px;" v-model="form.paymentDays" clearable controls-position="right"  ></el-input-number>
        </el-form-item>
      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="creatSuplier()">确 定</el-button>
      </span>
    </el-dialog>





    <!-- 表格 -->

    <el-table :data="tableData" style="width: 100%; margin-top: 20px" border
      :header-cell-style="{ 'text-align': 'center', 'font-size': '12px' }" :cell-style="{ 'text-align': 'center' }">
      <el-table-column label="供应商编号" prop="id" width="170px" />
      <el-table-column label="供应商名称" prop="supplierName" />
      <el-table-column label="联系人" prop="contactName">
      </el-table-column>
      <el-table-column label="联系电话" prop="tel">
      </el-table-column>
      <!-- <el-table-column label="联系邮箱" prop="mailbox" /> -->
      <!-- <el-table-column label="所在区域" prop="addr" /> -->
      <el-table-column label="详细地址" prop="addr" />
      <!-- <el-table-column label="账期天数" prop="Days" /> -->

      <el-table-column label="供应商状态" prop="state">
        <template slot-scope="scope">
            <div slot="reference">
              <el-tag :type="scope.row.state === 1 ? 'success' : 'danger'" size="medium">
                {{ scope.row.state  === 1 ? "正常" : "禁用"}}</el-tag>
            </div>
        </template>
      </el-table-column>


      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small"  v-hasBtn="'supplier_edit'" @click="shandleClick(scope.row)">编辑</el-button>
          <el-button type="text" size="small"  v-hasBtn="'supplier_detail'" @click="handleClick(scope.row)">详情</el-button>

          <el-button type="text" size="mini"  v-hasBtn="'supplier_enable'" v-if="scope.row.state == 0" @click="enOpen(scope.row)" >启用</el-button>
          <el-button type="text" size="mini"  v-hasBtn="'supplier_disable'" v-else @click="closeOpen(scope.row)">禁用</el-button>


        </template>
      </el-table-column>
    </el-table>


    <!-- 详情 -->

    <el-dialog title="供应商详情" :visible.sync="dialogTableVisible">
      <el-form ref="form" :model="form" :inline="true" label-position="left" style="font-size: 12px"
        class="demo-table-expand">
        <el-form-item label="供应商名称">
          <span>{{ form.supplierName }}</span>
        </el-form-item>
        <el-form-item label="联系人">
          <span>{{ form.contactName }}</span>
        </el-form-item>
        <el-form-item label="联系电话">
          <span>{{ form.tel }}</span>
        </el-form-item>
        <!-- <el-form-item label="所在区域">
          <span>{{ form.region }}</span>
        </el-form-item> -->
        <el-form-item label="详细地址">
          <span>{{ form.addr }}</span>
        </el-form-item>
        <!-- <el-form-item label="邮箱地址">
          <span>{{ form.mailbox }}</span>
        </el-form-item> -->
        <!-- <el-form-item label="供应商账期">
          <span>{{ form.Days }}</span>
        </el-form-item> -->
        <el-form-item label="供应商状态">
          <span v-if="form.state === 0">禁用</span>
          <span v-else>正常</span>
        </el-form-item>

        <el-form-item label="账期">
          <span>{{ form.paymentDays }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑弹窗 -->

    <el-dialog title="编辑" :visible.sync="dialogTable"  width="50%" center>
      <el-form  label-width="200px" :model="form" :rules="rules" class="demo-form-inline" ref="form">
        <el-form-item label="供货商名称:" prop="supplierName">
          <el-input style="width: 350px;" v-model="form.supplierName" placeholder="供货商名称"></el-input>
        </el-form-item>
        <el-form-item label="联系人:" prop="contactName">
          <el-input style="width: 350px;" v-model="form.contactName" placeholder="联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="tel">
          <el-input style="width: 350px;" v-model="form.tel" placeholder="联系电话"></el-input>
        </el-form-item>
        <!-- <el-form-item label="所属区域:">
          <el-select v-model="form.region" placeholder="所属区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="详细地址:" prop="addr">
          <el-input style="width: 350px;" v-model="form.addr" placeholder="详细地址"></el-input>
        </el-form-item>
        <!-- <el-form-item label="邮箱地址:">
          <el-input v-model="form.mailbox" placeholder="邮箱地址"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="供应商账期:">
          <el-input v-model="form.Days" placeholder="供应商账期"></el-input>
        </el-form-item> -->
        <el-form-item label="供应商状态:" prop="state">
          <el-radio-group v-model="form.state" placeholder="供应商状态">
            <el-radio :label="1" >正常</el-radio>
            <el-radio :label="0" >禁用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="账期"  prop="paymentDays">
          <el-input-number style="width: 350px;" v-model="form.paymentDays" clearable controls-position="right"  ></el-input-number>
        </el-form-item>
      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTable = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit()">确 定</el-button>
      </span>
    </el-dialog>



    <el-pagination
    background
    style="margin-top: 10px"
    :page-sizes="[10, 20, 50, 100]"
    :current-page.sync="pagemenu.page.page"
    :page-size="pagemenu.page.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalCount"
    @size-change="handleSizeChange"
    @next-click="handleNextChange"
    @prev-click="handlePrevClick"
    @current-change="handleCurrentChange"
  />






  </div>
</template>

<script>
  export default {
    data() {

      return {

        search:{
          supplierName: '',
          state: '',
        },


        totalCount: 0,
      totalPages: '',

        pagemenu:{
          page:{
            page: 1,
            pagesize: 10
          }
        
        },


        form: {
          id: '',
          addr: '',
          state: 1,
          supplierName: '',
          tel: '',
          contactName: '',
          paymentDays: 0
        },

        rules:{
          supplierName:[{
            message: '供应商姓名不能为空', required: true}]
        },

        centerDialogVisible: false,
        dialogTableVisible: false,
        dialogTable: false,
        detailDate: {},


        tableData: [{
            id: '212022011145271004',
            name: '测试天津辉弛科技有限公司',
            Contact: '联系人',
            phone: '18691616268',
            mailbox: 'shanxi@qq.com',
            region: '北京市-北京市-西域区',
            creatTime: '1月26日11时45分',
            address: '陕西省西安市',
            Days: '18天',
            endAddress: '测试天津辉弛科技有限公司',
            state: ''
          },


          {
            id: '212022011145271004',
            name: '测试天津辉弛科技有限公司',
            Contact: '欧亚',
            phone: '1308994146',
            mailbox: 'oya@qq.com',
            region: '北京市-北京市-西域区',
            creatTime: '1月26日11时45分',
            address: '陕西省西安市',
            Days: '3天',
            endAddress: '测试天津辉弛科技有限公司',
            state: ''
          }
        ],
        input: '',
        options: [{
            value: 1,
            label: '正常'
          },
          {
            value: 0,
            label: '禁用'
          },
        ],
        value: '',
        startTime: '',
        endTime: ''

      }

    },


    created() {
      this.getList()
    },
    methods: {




      searchList(){

            if (this.search.supplierName === '' && this.search.state === ''){
              this.getList()
            } else {
              let data = {
              relation:{
                conditions:[]
              }
            }

            if (this.search.supplierName){
                data.relation.conditions.push({
                  colName: 'supplier_name',
                  ruleType: 'like',
                  value: this.search.supplierName
                })
            }

            if (this.search.state !== ''){
                data.relation.conditions.push({
                  colName: 'state',
                  ruleType: 'eq',
                  value: this.search.state
                })
            }

            this.$request({
                url: '/supplier/lists',
                method: 'post',
                data: {
                  page: {
                     page: 1,
                     pageSize: 10
                  },
                  order:[{
                      colName: 'supplier_name',
                      orderType: '',
                  }],
                  relation: data.relation
                }
            }).then(res => {
              this.tableData = res.data
                  this.totalCount = res.totalCount
                  this.totalPages = res.totalPages
            })
            }
        
      },


      openCreate(){
        this.form.id = ''
        this.form.addr = ''
        this.form.state = 1
        this.form.supplierName = ''
        this.form.tel = ''
        this.form.contactName = ''
        this.centerDialogVisible = true
      },


      creatSuplier(){
        delete this.form.id
        this.$refs['form'].validate((valid) => {
        if (valid) {
            this.$request({
              url: '/supplier/save',
              method: 'post',
              data: this.form
            })
           .then((res) => {
             if (res.success){
               this.$notify.success("成功")
               this.getList();
             } else {
               this.$notify.warning(res.errMessage)
             }

           })
         .catch((error) => {
            console.log(error);
         });
       }
     })

     this.centerDialogVisible = false;
      },



      


      enOpen(val){
          this.$confirm('此操作将激活--' + val.supplierName + '--, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$request({
            url: '/supplier/enable/' + val.id,
            method: 'get'
                }).then(res => {
            if (res.success){
                console.log(res)
                this.getList()
            } else {
               this.$notify.warning(res.errMessage)
            }
        })
            this.$message({
              type: 'success',
              message: '成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });          
          });
        },

        closeOpen(val){
          this.$confirm('此操作将禁用--' + val.supplierName + '--, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$request({
            url: '/supplier/disable/' + val.id,
            method: 'get'
                }).then(res => {
            if (res.success){
                console.log(res)
                this.getList()
            } else {
               this.$notify.warning(res.errMessage)
            }
        })
            this.$message({
              type: 'success',
              message: '成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });          
          });
        },


      getList(){
          this.$request({
              url: '/supplier/lists',
              method: 'post',
              data: this.pagemenu
          }).then(res => {
              if (res.success){
                  this.tableData = res.data
                  this.totalCount = res.totalCount
                  this.totalPages = res.totalPages
              }
          })
      },


      handleCurrentChange(val) {
      this.pagemenu.page.page = val
      this.getList()
    },

    handlePrevClick(val) {
      this.pagemenu.page.page = val
      this.getList()
    },

    handleNextChange(val) {
      this.pagemenu.page.page = val
      this.getList()
    },

    handleSizeChange(val) {
      this.pagemenu.page.pagesize = val
      this.getList()
    },



    //   handlePrevClick(val) {
    //   this.pagemenu.page.page = val
    //   this.getList()
    //   },

    //     handleNextChange(val) {
    //   this.pagemenu.page.page = val
    //   this.getList()
    // },

    // handleSizeChange(val) {
    //   this.pagemenu.page.pagesize = val
    //   this.getList()
    // },




      onSubmit() {
        console.log('submit!');
      },

      handleClick(val) {
        console.log(val)
        this.form.supplierName = val.supplierName
        this.form.id = val.id
        this.form.addr = val.addr
        this.form.state = val.state
        this.form.tel = val.tel
        this.form.contactName = val.contactName
        this.form.paymentDays = val.paymentDays
        this.dialogTableVisible = true
      },
      shandleClick(val) {
        console.log(val)
        this.form.supplierName = val.supplierName
        this.form.id = val.id
        this.form.addr = val.addr
        this.form.state = val.state
        this.form.tel = val.tel
        this.form.contactName = val.contactName
        this.form.paymentDays = val.paymentDays
        this.dialogTable = true
      },

      submitEdit(){
        this.$refs['form'].validate((valid) => {
        if (valid) {
            this.$request({
              url: '/supplier/update',
              method: 'post',
              data: this.form
            })
           .then((res) => {
             if (res.success){
               this.$notify.success("更新成功")
               this.getList();
             } else {
               this.$notify.warning(res.errMessage)
             }

           })
         .catch((error) => {
            console.log(error);
         });
       }
     })

     this.dialogTable = false
      },

      onSubmit() {
        this.$message('submit!')
      },
      onCancel() {
        this.$message({
          message: 'cancel!',
          type: 'warning'
        })
      },

      async handleStatus(val) {
        try {
          await changeState({
            id: val.id,
            state: val.state == 1 ? 0 : 1
          });
          this.getDirectorysList();
          this.$message.success("操作成功");
        } catch (err) {
          this.$message.error("操作失败");
        }
      },


      handleStatus(val) {
        console.log(val.state);
        var status = "";
        if (val.state === true) {
          val.state = 0;
          status = "禁用";
        } else {
          val.state = 1;
          status = "启用";
        }
        var data = {
          id: val.id,
          state: val.state
        };
        this.$confirm("已成功" + status + ", 是否继续?", "提示", {
            type: "warning"
          })
          .then(async () => {
            await changeState(data)
              .then(response => {
                this.$message.success("已成功" + status + "!");
                this.getDirectorysList();
              })
              .catch(response => {
                this.$message.error(status + "失败!");
              });
          })
          .catch(() => {
            this.$message.info("已取消操作!");
          });
      },

  




      handleCurrentChange(val) {
      this.pagemenu.page.page = val
      this.getList()
    },

  
    }
  }

</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #59ca9b;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>
